<template>
  <div class="page ">
    <div class="page-item">
        <div class="page-title"> datetimePicker 功能验证：</div>
        <div class="page-flex">
            <label>disabled功能验证：</label>
            <ekRadio v-model="fromtest.disabled" :options="[
            {
                value: true,
                label: '启用',
            },
            {
                value: false,
                label: '禁用',
            }
            ]"
            @change="changeRadio"
            />
      </div>
       <div class="page-flex">
        <label>clearable功能验证：</label>
         <ekRadio v-model="fromtest.clearable" :options="[
           {
            value: true,
            label: '启用',
          },
          {
            value: false,
            label: '禁用',
          }
        ]" />
      </div>
      <div class="page-flex">
        <label>format功能验证：</label>
        <ekInput v-model="fromtest.format" />
      </div>
      <div class="page-flex">
        <label>type功能验证：</label>
        <ekInput v-model="fromtest.mode" />
      </div>
     <div class="page-flex">
        <label>valueFormat功能验证：</label>
        <ekInput v-model="fromtest.valueFormat" />
      </div>
      <div class="page-flex">
        <label>placeholder功能验证：</label>
        <ekInput v-model="fromtest.placeholder" />
      </div>
      <div class="page-flex mt-btn">
        <label>change功能验证：{{ fromtest.change }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>blur功能验证：{{ fromtest.blur }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>focus功能验证：{{ fromtest.focus }}</label>
      </div>
       <div class="page-flex mt-btn">
        <label>clear功能验证：{{ fromtest.clear }}</label>
      </div>
    </div>
    <div class="page-item">
        <div>
            <ekDateTimePicker 
                v-if="show"
                v-model="form.input" 
                :placeholder="fromtest.placeholder" 
                :disabled="fromtest.disabled" 
                :clearable="fromtest.clearable"
                :format="fromtest.format"
                :mode="fromtest.mode"
                :valueFormat="fromtest.valueFormat"
                @change="change"
                @blur="blur"
                @focus="focus"
                @clear="clear"
            />
        </div>
       
        <formRender :form="form" :columns="columns" ref="forms"
            @change="change"
            @blur="blur"
            @focus="focus"
            @clear="clear"
        />
        <el-button  @click="test" class="mt-btn">测试</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, reactive, ref} from "vue";
import formRender from "@/components/form/formRender.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekDateTimePicker from "@/components/form/ekDateTimePicker/index.vue";

let fromtest = ref( {
  disabled: false,
  clearable: true,
  placeholder: '',
  format:'YYYY-MM-DD HH:mm:ss',
  mode:'datetime',
  valueFormat:'',
  blur: '',
  change:'',
  focus:'',
  input:'',
  clear:'',
})
let form = reactive({
  input: "",
  input2: "",
  input3: ""
});

let columns = ref([
  {
    type: "DateTimePicker",
    column: "input2",
    label: "datepicker",
    valueFormat:'YYYY/MM/DD',
    rules: [{ required: true, message: "请选择日期", trigger: "blur" }],
  },
]);
const forms = ref(null)
const test = () => {
    console.log(form)
    forms.value.validate(()=>{

    });
};

const options = ref([
    {
        value: 'success',
        label: '选项1',
    },
    {
        value: 'fail',
        label: '选项2',
    },
    {
        value: 'error',
        label: '选项3',
    }
])
const testData = (type) =>{
    if(type == 2){
        options.value= [
            {
                value: 'success',
                label: 'success',
            },
            {
                value: 'fail',
                label: 'fail',
            },
            {
                value: 'error',
                label: 'error',
            }
        ]
    } else if(type ==3) {
        options.value= [
            {
                value: '1',
                label: '1',
            },
            {
                value: '2',
                label: '2',
            },
            {
                value: '3',
                label: '3',
            }
        ]
    } else {
         options.value= [];
    }
}

const changeRadio = () =>{
    columns.value[0].disabled = fromtest.value.disabled
}
// 失去焦点
const blur = (event) => {
    fromtest.value.blur = 'blur事件:' + JSON.stringify(event);
  console.log(event, 'blur')
};
// 聚焦
const focus  = (event) => {
    fromtest.value.focus = 'focus事件:' + JSON.stringify(event);
  console.log(event, 'focus')
};
// 改变事件
const change  = (event) => {
    fromtest.value.change = 'change事件:' + JSON.stringify(event);
  console.log(event, 'change')
};

// 实时改变事件
const clear = () => {
    fromtest.value.clear = 'clear事件' ;
  console.log('clear')
};

const show = ref(true);
const testne = () =>{
    show.value = false;
    setTimeout(()=>{
        show.value = true;
    }, 1000)
}
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
  display: flex;
    .page-item {
        border: 1px solid #fff;
        padding: 10px;
            margin: 10px;
    }
  .page-title {
    font-size: 16px;
  }
  .page-flex {
    display: flex;
    align-items: center;
  }
  .mt-btn {
    margin-top: 10px;
  }
}
</style>
